import React from 'react';
import { Card, Form, Row, Col, Input, Button, Table, Radio, DatePicker, Select, Modal, Upload, Alert } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { FormInstance } from 'antd/lib/form';
import { history } from 'umi';
const { RangePicker } = DatePicker;

import * as columnsList from './dto';

const {Option} = Select;

const options = [
	{ label: '全部', value: '1' },
	{ label: '未处理', value: '2' },
	{ label: '发布中', value: '3' },
	{ label: '已发布', value: '4' },
	{ label: '已退稿', value: '5' },
	{ label: '已退款', value: '6' },
	{ label: '拒绝售后', value: '7' },
	{ label: '售后中', value: '8' }
];

const columns = [
	{
		title: '订单号',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '稿件标题',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '发稿媒体',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '价格',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '状态',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '下单时间',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '发布时间',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '操作',
		dataIndex: 'number',
		key: 'number'
	}
];

const tableData = [];

for(let i=0;i<10;i++){
	tableData.push({key: i})
}			





class Feedback extends React.Component{
	formRef = React.createRef<FormInstance>();
	handelCancel = () => {
		this.props.onCancel();
	}
	render(){
		const {visible} = this.props;
		const props = {
			name: 'file',
			action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
			headers: {
			  authorization: 'authorization-text',
			},
			onChange() {
			  
			},
		};
		  
		return (
			<Modal width={600} title="0-23333 人民日报 http://www.baidu.com" visible={visible} onOk={() => this.handelCancel()} onCancel={() => this.handelCancel()}>
				<Form ref={this.formRef}>
					<Form.Item
						label="文章标题"
						name="value"
					>
						<span>羡慕羡慕212211</span>
					</Form.Item>
					<Form.Item
						label="出稿链接"
						name="value1"
					>
						<Input placeholder='请输入出稿链接' />
					</Form.Item>
					<Form.Item
						label="赠送链接"
						name="value2"
					>
						<Input placeholder='请输入赠送链接' />
					</Form.Item>
					<Form.Item
						label="文字链图片截图"
						name="value3"
					>
						<Upload {...props}>
							<Button icon={<UploadOutlined />}>上传文件</Button>
						</Upload>
					</Form.Item>
				</Form>
			</Modal>
		)
	}
}

class Rejection extends React.Component{
	formRef = React.createRef<FormInstance>();
	handelCancel = () => {
		this.props.onCancel();
	}
	render(){
		const {visible} = this.props;
		return (
			<Modal width={600} title="0-23333 人民日报" visible={visible} onOk={() => this.handelCancel()} onCancel={() => this.handelCancel()}>
				<Form ref={this.formRef}>
					<Form.Item
						label="文章标题"
						name="value"
					>
						<span>羡慕羡慕212211</span>
					</Form.Item>
					<Form.Item
						label="拒稿原因"
						name="value1"
					>
						<Radio.Group>
							<Radio value={1}>内容不匹配</Radio>
							<Radio value={2}>需要白名单</Radio>
							<Radio value={3}>审核没通过</Radio>
							<Radio value={4}>标题太长</Radio>
							<Radio value={5}>暂停收稿</Radio>
						</Radio.Group>
					</Form.Item>
					<Form.Item
						label="其他原因"
						name="value2"
					>
						<Input placeholder='请输入其他原因' />
					</Form.Item>
				</Form>
			</Modal>
		)
	}
}

class AfterSalesYes extends React.Component{
	formRef = React.createRef<FormInstance>();
	handelCancel = () => {
		this.props.onCancel();
	}
	render(){
		const {visible} = this.props;
		return (
			<Modal width={600} title="0-23333 人民日报" visible={visible} onOk={() => this.handelCancel()} onCancel={() => this.handelCancel()}>
				<Form ref={this.formRef}>
					<Form.Item
						label="文章标题"
						name="value"
					>
						<span>羡慕羡慕212211</span>
					</Form.Item>
					<Form.Item
						label="售后理由"
						name="value1"
					>
						<span>内容填写错误需要修改，内容打不开</span>
					</Form.Item>
					<Form.Item
						label="售后链接"
						name="value2"
					>
						<Input placeholder='请输入售后链接' />
					</Form.Item>
					<Form.Item
						label="售后回复"
						name="value3"
					>
						<span>内容已修改 同意退款</span>
					</Form.Item>
					<Form.Item
						label="售后回复"
						name="value4"
					>
						<Input placeholder='请输入售后回复' />
					</Form.Item>
				</Form>
			</Modal>
		)
	}
}

class AfterSalesNo extends React.Component{
	formRef = React.createRef<FormInstance>();
	handelCancel = () => {
		this.props.onCancel();
	}
	render(){
		const {visible} = this.props;
		return (
			<Modal width={600} title="0-23333 人民日报" visible={visible} onOk={() => this.handelCancel()} onCancel={() => this.handelCancel()}>
				<Form ref={this.formRef}>
					<Form.Item
						label="售后理由"
						name="value1"
					>
						<span>内容填写错误需要修改，内容打不开</span>
					</Form.Item>
					<Form.Item
						label="售后链接"
						name="value2"
					>
						<Input placeholder='请输入售后链接' />
					</Form.Item>
					<Form.Item
						label="拒绝理由"
						name="value4"
					>
						<Input placeholder='请输入拒绝理由' />
					</Form.Item>
				</Form>
			</Modal>
		)
	}
} 

class MessageT extends React.Component{
	formRef = React.createRef<FormInstance>();
	handelCancel = () => {
		this.props.onCancel();
	}
	render(){
		const {visible} = this.props;
		return (
			<Modal width={600} title="qq消息推送设置" visible={visible} onOk={() => this.handelCancel()} onCancel={() => this.handelCancel()}>
				<Alert message="功能消息开启后，请添加qq消息推送机器人媒妹一号为qq好友，才能收到订单消息推送" type="info" showIcon />
				<div style={{height: 15}}></div>
				<Form ref={this.formRef}>
					<Form.Item
						label="推送开关"
						name="value1"
					>
						<Radio.Group>
							<Radio value={1}>关闭</Radio>
							<Radio value={2}>开启</Radio>
						</Radio.Group>
					</Form.Item>
					<Form.Item
						label="绑定qq号"
						name="value1"
					>
						<Input placeholder='请填写接受订单消息的qq号码' />
					</Form.Item>
					<Form.Item
						label="消息间隔"
						name="value1"
					>
						<Input placeholder='两次QQ消息提醒间隔分钟数' suffix="分钟" />
					</Form.Item>
				</Form>
			</Modal>
		)
	}
} 

class Order extends React.Component{
	state = {
		radioValue: '1',
		feedbackVisible: false,
		rejectionVisible: false,
		afterSalesYesVisible: false,
		afterSalesNoVisible: false,
		messageTVisible: false
	}
	formRef = React.createRef<FormInstance>();
	componentDidMount(){
		this.formRef.current?.setFieldsValue({value1: '1'})
	}
	render(){
		let newColumns = null;
		const {feedbackVisible,rejectionVisible,afterSalesYesVisible,afterSalesNoVisible,messageTVisible} = this.state;
		switch(this.state.radioValue){
			case '1': 
			newColumns = columnsList.columns1.bind(this)(<Button type='primary' size='small'>已发布</Button>);
			break;
			case '2': 
			newColumns = columnsList.columns2.bind(this)(<Button type='primary' size='small'>待接单</Button>, <>
				<Button type='primary' size='small'>接单</Button>
			</>)
			break;
			case '3': 
			newColumns = columnsList.columns3.bind(this)(<Button type='primary' size='small'>进行中</Button>, <>
				<Button type='primary' size='small' onClick={() => this.setState({feedbackVisible: true})}>反馈出稿</Button>
				<Button type='primary' size='small' onClick={() => this.setState({rejectionVisible: true})} style={{marginLeft: 5}}>退回拒绝</Button>
			</>)
			break;
			case '4': 
			newColumns = columnsList.columns4.bind(this)(<Button type='primary' size='small'>已发布</Button>, <>
				<Button type='primary' size='small'>查看链接</Button>
			</>)
			break;
			case '5': 
			newColumns = columnsList.columns5.bind(this)(<Button type='primary' size='small'>已退稿</Button>)
			break;
			case '6': 
			newColumns = columnsList.columns6.bind(this)(<Button type='primary' size='small'>已退款</Button>)
			break;
			case '7': 
			newColumns = columnsList.columns7.bind(this)(<Button type='primary' size='small'>拒绝售后</Button>)
			break;
			case '8': 
			newColumns = columnsList.columns8.bind(this)(<Button type='primary' size='small'>售后中</Button>, <>
				<Button type='primary' size='small' onClick={() => this.setState({afterSalesYesVisible: true})}>同意</Button>
				<Button type='primary' size='small' onClick={() => this.setState({afterSalesNoVisible: true})} style={{marginLeft: 5}}>拒绝</Button>
			</>)
			break;
		}

		
		return (
			<div>
				<Form ref={this.formRef}>
					<Row gutter={10}>
						<Col span={8}>
							<Form.Item
								label="订单搜索"
								name="value"
							>
								<Input placeholder='支持订单编号、稿件标题、媒体名称、出稿回链一键查询' />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="订单日期"
								name="username"
							>
								<RangePicker showTime />
								
							</Form.Item>
						</Col>
						<Col span={8}>
							<div style={{textAlign: 'right'}}>
								<Button type='primary' onClick={() => this.setState({messageTVisible: true})}>订单消息推送</Button>
							</div>
						</Col>
					</Row>
			    	<Row gutter={10}>
						<Col span={8}>
							<Form.Item
								label="订单状态"
								name="value2"
							>
								<Select style={{ width: '100%' }} >
									<Option value="1">未处理</Option>
									<Option value="2">发布中</Option>
									<Option value="3">已发布</Option>
									<Option value="4">已退稿</Option>
									<Option value="5">已退款</Option>
									<Option value="6">拒绝售后</Option>
									<Option value="7">售后中</Option>
								</Select>
							</Form.Item>	
						</Col>
						<Col span={10}>
							<div style={{marginLeft: 10}}>
								<Button type="primary">查询一下</Button>
							</div>
						</Col>
					</Row>
				    
				    <Form.Item
				    	name="value1"
				    >
				    	<Radio.Group
				          options={options}
				          optionType="button"
						  onChange={(e) => this.setState({radioValue: e.target.value})}
				        />
				    </Form.Item>
			    </Form>
			    <Table columns={newColumns} dataSource={tableData} />
				<Feedback visible={feedbackVisible} onCancel={() => this.setState({feedbackVisible: false})} />
				<Rejection visible={rejectionVisible} onCancel={() => this.setState({rejectionVisible: false})}/>
				<AfterSalesYes visible={afterSalesYesVisible} onCancel={() => this.setState({afterSalesYesVisible: false})}/>
				<AfterSalesNo visible={afterSalesNoVisible} onCancel={() => this.setState({afterSalesNoVisible: false})}/>
				<MessageT visible={messageTVisible} onCancel={() => this.setState({messageTVisible: false})} />
			</div>
		)
	}
}

const tabListNoTitle = [
	{
	    key: '1',
	    tab: '订单管理',
	},
	{
	    key: '2',
	    tab: '收益管理',
	},
	{
	    key: '3',
	    tab: '资源管理',
	}
]
export default class Message extends React.Component{
	state = {
		noTitleKey: '1',
		
	}
	onTabChange = (key) => {
		if(key === '2'){
			history.push('/mediaCenter/revenueManagement')
		}else if(key === '3'){
			history.push('/mediaCenter/myResources/list')
		}
		
	}
	render(){
		
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<Card tabList={tabListNoTitle} activeTabKey={this.state.noTitleKey} onTabChange={key => {
		            this.onTabChange(key);
		          }} bordered={false} style={{ width: '100%' }}>
		          	<Order/>
				</Card>
				
			</div>
		)
	}
}